【day9】用CSS讓加載中...動起來

2019 iT 邦幫忙鐵人賽

DAY 8

自我挑戰組

CSS、JS-30天研究筆記系列第 9 篇

2019鐵人賽

Amy

2018-10-09 23:43:03

750 瀏覽

分享至

運用content屬性搭配Unicode字符，可以達成一些特別的效果。
下方例子是運用content屬性加上"\A"(即換行字符)，做出圖片或文字加載中的動畫效果。

<style>
    span {
        display: inline-block; 
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    span::before {
        display: block;
        content: '...\A..\A.';
        white-space: pre-wrap;
        animation: span 3s infinite step-start both;
    }
    @keyframes span {
        33% { transform: translateY(-2em); }
        66% { transform: translateY(-1em); }
    }
  </style>
<body>
  <p>加載中<span>...</span></p>
</body>